<template>
	<view class="uni_box home">
		<navbar title='免费领取福利'>
			
		</navbar>
		<view class="content">
			<!-- <view class="list">
				<image class="img_sxk" src="/static/img/img_lxk.png"></image>
				<view class="ntwo">
					<text class="shua">联系卡</text>
					<view class="bot">
						<text class="shuamiao">周一领取3张 其余每日领取1张</text>
						<view class="ling">每日领取</view>
					</view>
				</view>
			</view>
			<view class="list">
				<image class="img_sxk" src="/static/img/cai.png"></image>
				<view class="ntwo">
					<text class="shua">刷新卡</text>
					<view class="bot">
						<text class="shuamiao">会员3张 非会员1张</text>
						<view class="ling" style="color: rgba(255, 74, 103, 1);">每日领取</view>
					</view>
				</view>
			</view> -->
			<view class="list" v-for="(item,index) in list" @click="getitem(item)">
				<image class="img_sxk" :src="item.bgimage"></image>
				<view class="ntwo">
					<text class="shua">{{item.title}}</text>
					<view class="bot">
						<text class="shuamiao">{{item.descript}}</text>
						<view class="ling" :class="item.id==2?'caise':''">每日领取</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[]
			}
		},
		onLoad() {
			this.getinit()
		},
		onShow() {
		},
		methods: {
			async getinit(){
				let res = await this.$u.api.getListByFree({
				});
				this.list = res
			},
			async getitem(item){
				let res = await this.$u.api.receiveProp({
					id:item.id
				});
				this.$u.toast("操作成功");
				this.getinit()
			},
			gettousu(){
				// this.navrouter("/pages_subject/twoPage/TouSuRecord");
				this.navrouter("/pages_subject/twoPage/TouSuList");
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #F5F5F5;
	}
	.content{
		background-color: #F5F5F5;
		min-height: 100vh;
		.list{
			// padding: 35rpx 30rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			height: 220rpx;
			position: relative;
			margin: 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.img_sxk{
				width: 100%;
				height: 100%;
				position: absolute;
			}
			.ntwo{
				display: flex;
				flex-direction: column;
				width: 100%;
				height: 100%;
				position: relative;
				padding: 48rpx 30rpx 30rpx 62rpx;
				.shua{
					font-weight: 800;
					font-size: 40rpx;
					color: #FFFFFF;
				}
				.shuamiao{
					font-weight: 500;
					font-size: 26rpx;
					color: #FFFFFF;
					display: block;
					
				}
				
			}
			.bot{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 15rpx;
			}
			.ling{
				width: 149rpx;
				height: 53rpx;
				background: #FFFFFF;
				border-radius: 27rpx;
				border: 2px solid #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 500;
				font-size: 24rpx;
				color: #5E33FF;
				margin-left: auto;
			}
			.caise{
				color:  rgba(255, 74, 103, 1);
			}
		}
	}
</style>
